<template>
	<view class="search">
		<u-navbar back-text="返回">
			<view class="search-wrap">
				<u-search v-model="search" height="56" :show-action="false" :action-style="{color: '#fff'}" @search="searchEvent"></u-search>
			</view>
		</u-navbar>
		
		<view class="goodsList">
			<view class="item flex_space_b" v-for="(item, index) in goods_list" :key="index" @click="goDetails(index)">
				<view class="imageBox">
					<u-image width="200rpx" height="200rpx" border-radius="12" :src="item.goods_main_img"></u-image>
					<!-- <view class="mask">最高补贴:￥53.92</view> -->
					<!-- <view class="rect"></view>
					<view class="desc">热拍</view> -->
					<view class="mask flex_conter_c" v-if="item.store_num < 1">
						<image class="soldOut" src="/static/soldOut.png" mode="widthFix"></image>
					</view> 
				</view>
				<view class="info flex_conter_c">
					<view class="flex1 goodsInfoBox">
						<view class="title u-line-2">{{item.goods_title}}</view>
						<view class="data">
							<view class="flex">
								<view class="price">￥<text>{{item.sales_price}}</text></view>
								<!-- <view class="group">差2人成团</view> -->
								<view class="original">￥{{item.original_price}}</view>
							</view>
						<!-- 	<view class="ratio">
								<text>拼中率:{{item.award_rate}}%</text>
							</view> -->
							<view class="bottoBox" v-if="item.is_score_goods == '10'">
								<!-- <text>拼中率:{{item.award_rate}}%，差{{item.limit_user_count}}人成团</text> -->
								<view class="group">{{item.sub_team_count}}人团</view>
								<view class="subsidy">最高补贴:<text>￥{{item.max_income}}</text></view>
							</view>
							<view class="bottoBox" v-else>
								<!-- <view class="surplus">库存<text>5</text>个</view> -->
								<view class="subsidy2">
									<!-- 积分抵扣:<text>{{item.discounts_rate}}</text>
									<text class="line">+</text> 
									<text>￥{{numFilter(item.sales_price-item.score_use)}}</text>到手 -->
									<view>积分抵扣到手价:<text class="text">￥{{numFilter(item.sales_price - item.score_use)}}</text></view>
								</view>
							</view>
							<view class="car flex_conter_c">
								<u-icon name="gouwuche" custom-prefix="custom-icon" size="28" color="#fe0000"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="noContent" v-if="goods_list.length == 0">
		  <image class="noContentImage" mode="widthFix" src="/static/noLive.png"></image>
		  <view class="text">没有搜索到相关内容</view>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				search: '',
				p:1,
				is_loading:false,
				is_more:true,
				goods_list:[]
			}
		},
		onLoad(options) {
			this.search = options.search;
			this.loadData();
		},
		onReachBottom() {
			if(!this.is_loading){
			  if(!this.is_more){
				util.toast("没有更多数据了");
				return false;
			  }
			  this.p = parseInt(this.p) + 1;
			  this.loadData();
			}
		},
		methods: {
			loadData: function(){
				// 加载数据
				var that = this;
				let data = {
					'p':this.p,
					'search':this.search
				};
				this.is_loading = true;
				util.requestPost("api.php/home/searchGoodsList", data, function(res) {
					let is_more = false;
					if(res.data.goods_list.length >=15){
					  is_more = true;
					}
					if(that.p == 1){
						that.goods_list = res.data.goods_list;
					}else{
						that.goods_list = that.goods_list.concat(res.data.goods_list);
					}
					that.is_loading = false;
					that.is_more = is_more;
				});
			},
			searchEvent:function(){
				// 搜索
				this.is_more = true;
				this.p = 1;
				this.loadData();
			},
			goDetails(idx) {
				// 商品详情
				let that = this;
				uni.navigateTo({
					url: '/pages/index/goodsDetails?goods_id='+that.goods_list[idx].goods_id
				})
			},
			numFilter (value) {
				// 截取当前数据到小数点后两位
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			}
		}
		
	}
</script>

<style scoped>
.search-wrap {
	display: flex;
	align-items: center;
	margin: 0 20rpx;
	flex: 1;
}

.goodsList {
	padding: 0 32rpx;
}
.goodsList .item {
	border-radius: 12rpx;
	overflow: hidden;
}
.goodsList .item .imageBox {
	position: relative;
	border-radius: 12rpx;
	overflow: hidden;
}
.goodsList .item .imageBox .mask {
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	color: #FFFFFF;
	font-size: 24rpx;
	text-align: center;
}
.goodsList .item .info {
	flex: 1;
	padding: 40rpx 20rpx;
	border-bottom: 1rpx solid #EEEEEE;
	height: 252rpx;
}
.goodsList .item .info .goodsInfoBox {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 100%;
}
.goodsList .item .info .title {
	color: #333333;
	font-size: 30rpx;
	font-weight: 600;
}
.goodsList .item .info .data {
	margin-top: 8rpx;
	position: relative;
}
.goodsList .item .info .data .flex {
	display: flex;
	align-items: flex-end;
}
.goodsList .item .info .data .flex .price {
	color: var(--primaryColor);
	font-size: 24rpx;
	margin-right: 20rpx;
	font-weight: 600;
}
.goodsList .item .info .data .flex .price text {
	font-size: 32rpx;
}
.goodsList .item .info .data .flex .original {
	color: #666;
	font-size: 24rpx;
	text-decoration: line-through;
}
.goodsList .item .info .data .ratio {
	color: #666;
	font-size: 24rpx;
	margin-top: 8rpx;
}
.goodsList .item .info .data .ratio text:first-of-type {
	margin-right: 28rpx;
}

.goodsList .item .info .data .bottoBox {
	margin-top: 8rpx;
}
.goodsList .item .info .data .bottoBox .group {
	display: inline-block;
	font-size: 20rpx;
	color: var(--primaryColor);
	// background-color: var(--primaryColor);
	border: 1rpx solid var(--primaryColor);
	border-radius: 8rpx;
	padding: 0 4rpx;
}
.goodsList .item .info .data .bottoBox .subsidy {
	display: inline-block;
	font-size: 22rpx;
	margin-left: 16rpx;
}
.goodsList .item .info .data .bottoBox .subsidy .line {
	color: #333333;
	font-weight: bold;
	/* margin: 0 8rpx; */
}
.goodsList .item .info .data .bottoBox .subsidy text{
	color: var(--primaryColor);
}
.goodsList .item .info .data .bottoBox .subsidy2 {
	display: inline-block;
	font-size: 22rpx;
}
.goodsList .item .info .data .bottoBox .subsidy2 text{
	font-size: 26rpx;
	color: var(--primaryColor);
}

.goodsList .item .info .data .btn {
	background: var(--btnBgColor);
	position: absolute;
	bottom: 0;
	right: 0;
	border-radius: 40rpx;
}
.goodsList .item .info .data .car {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 48rpx;
	height: 48rpx;
	border-radius: 40rpx;
	background: #ffe5e5;
}

.noContent {
	height: calc(100vh - 68px);
}
</style>
